<template>
    <div>
        <div class="wait">
            <ul class="waitul">
                <li>
                    <h2>我的订单</h2>
                </li>
                <li>
                    <ul class="waitshop">
                        <li>商品名称或订单号：<el-input  placeholder="请输入订单号" style="width:180px"></el-input></li>
                        <li>下单日期：</li>
                        <li>
                        <div class="block"><span class="demonstration"></span>
                        <el-date-picker 
                         v-model="value6"
                        type="datetimerange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['12:00:00']" style="259px">
                        </el-date-picker>
                       </div></li>
                        <li>查询</li>
                    </ul>
                </li>
                <li style="clear: both;"></li>
                <li>
                    <div>
                        <div class="waitspan">
                            <div>
                                <span>宝贝</span>
                                <span>单价</span>
                                <span>下单数量(箱)</span>
                                <span>总价</span>
                                <span>操作</span>
                            </div>
                        </div>
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </li>
            </ul>
          <Orders :list="types"/>
        </div>
    </div>
</template>

<script>

import Orders from "./Orders"

export default {
  data() {
    return {
      value6: "",
      value7: "",
      types: true
    };
  },
  components :{
    Orders
  }
};
</script>

<style>
.wait {
  width: 1021px;
  height: 760px;
  margin-left: 13px;
}
.waitul {
  padding-left: 3px;
}
.waitshop {
  padding-top: 9px;
}
.waitshop li {
  float: left;
  line-height: 38px;
  font-size: 15px;
  color: #4c4f52;
  margin-right: 5px;
}
.el-range-editor.el-input__inner {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3px 10px;
  width: 367px;
}
.waitshop li:nth-child(1) {
  margin-right: 13%;
}
.waitshop li:last-child {
  margin-left: 3%;
  width: 67px;
  height: 37px;
  background: #0072ff;
  color: white;
  text-align: center;
  margin-top: 2px;
  border-radius: 5%;
}
.waitshop li:last-child:hover {
  background: #0f50a0;
}
.waitspan {
  width: 100%;
  height: 30px;
  margin-top: 5px;
  border-top: 1px solid #ccc;
}
.waitspan>div{
    margin-top: 5px;
    width: 100%;
    height: 35px;
    background:#f2f2f2;
    border-radius: 2%;
}
.waitspan>div span{
    font-size: 14px;
    color: #4c4f52;
    padding-right: 79px;
}
.waitspan>div span:first-child{
    padding-left: 28px;
    line-height: 35px;
}
.waitspan>div span:nth-child(2){
    padding-left: 31%;
}
.waitspan>div span:nth-child(5){
    padding-left: -9%;
}
</style>
